<template>
    <div class="stepThree">
        <step-bar step="2"/>
        <head-info :info="info" :name="$storage.get('taxDiscount').companyName"/>
        <div class="select-policy">
            <p class="title">请勾选可选政策</p>
            <van-radio-group v-model="selectPolicyId">
                <van-radio :name="item.discountProjectId" v-for="item in checkList" :key="item.discountProjectId">{{item.projectTitle}}</van-radio>
            </van-radio-group>
         </div>
        <p class="next-step">
            <van-button size="large" @click="nextStep" :loading="loadingState">下一步</van-button>
        </p>
    </div>
</template>

<script>
import { Toast } from 'vant'
export default {
    data() {
        return {
            info: '根据提供的条件，该企业可能享受以下相关优惠政策，选择一项政策进行下一步确认是否可享受。',
            selectPolicyId: '',
            checkList: [],
            loadingState: false,
            selectsData: []
        }
    },
    created() {
        this.getDiscountSelectData()
        //缓存userId
        if(this.$route.params.userId){
            this.$storage.add('taxDiscount','userId',this.$route.params.userId)
        }
    },
    computed: {
        userId() {
            return this.$route.params.userId?this.$route.params.userId:this.$storage.get('taxDiscount').userId
        }
    },
    methods: {
       //获取可选政策
        getDiscountSelectData() {
            const data = {
                userId: this.userId
            }
            this.$axios
            .post(this.API.discountSelectQuery,data)
            .then(res => {
                if(res.data.code == 100) {
                    this.checkList = res.data.data
                }else{
                    Toast(res.data.mesg)
                }
            })
            .catch(err => {
                // console.log(err)
            }); 
        },
        //下一步
        nextStep() {
            if(this.selectPolicyId == '') {
                Toast({
                    message:'请选择可选政策',
                    duration: 1500
                    })
                return
            }
            this.loadingState = true
            this.$router.direction = 'left'
            const data = {
                discountProjectId: this.selectPolicyId
            }
            this.$axios
            .post(this.API.selectsQuery,data)
            .then(res => {
                if(res.data.code == 100) {
                   this.selectsData = res.data.data
                   if(this.selectsData.length == 0) {
                       this.getResult()
                   }else {
                       this.loadingState = false
                       this.goToParams('stepFour',{projectId: this.selectPolicyId})
                   }
                }else{
                    Toast(res.data.mesg)
                }
            })
            .catch(err => {
                // console.log(err)
            }); 
            
        },
        //若无选题直接生成结果
        getResult() {
            const data = {
                userId: this.userId,
                discountProjectId: this.selectPolicyId,
                answers: []
            }
            this.$axios
            .post(this.API.saveSelectsResult,data,{dataType:'json'})
            .then(res => {
                if(res.data.code == 100) {
                    this.loadingState = false
                    this.goToParams('stepFive',{resultId: res.data.data})
                }else{
                    Toast(res.data.mesg)
                }
            })
            .catch(err => {
                // console.log(err)
            })
        }
    }
}
</script>

<style lang="less" scoped>
.stepThree {   
    padding-top: 90px;
    .select-policy {
        height: 820px;
        overflow-y: scroll;
        background-color: #fff;
        padding: 46px 80px 40px;
        position: relative;
        &::before {
            content: '';
            position: absolute;
            width: 100%;
            height: 16px;
            background-color: #f5f5f5;
            top: 0;
            left: 0;
        }
        .title {
            font-size: 28px;
            color: #6c52fb;
            margin-bottom: 25px;
        }
       
    }
}
</style>
